<template>
    <div>
        <div
            class="chart-wrapper"
            ref="chartBox"
            v-show="rate"
            style="width: 100rem; height: 100rem"
        ></div>
        <el-empty description="暂无数据" v-show="!rate" :image-size="60" />
    </div>
</template>

<script setup>
import { onBeforeUnmount, onMounted, ref, watch, nextTick } from "vue";
import * as echarts from "echarts";
import { debounce, nowSize } from "@/utils/util.js";
import { ElLoading, ElMessage } from "element-plus";

const chartBox = ref();
let myChart = ref(null);

// 传入数据
const props = defineProps({
    rate: Number, // 横坐标名称
});

const resizeHandler = debounce(() => {
    if (myChart) {
        myChart.resize();
    }
}, 200);

onMounted(() => {
    setTimeout(() => {
        getChartData();
    }, 1000);
    window.addEventListener("resize", resizeHandler);
});

onBeforeUnmount(() => {
    window.removeEventListener("resize", resizeHandler);
});

watch(
    () => props.chartData,
    (newVal, oldVal) => {
        getChartData();
    }
);

const getChartData = () => {
    nextTick(() => {
        initEcharts();
    });
};

const initEcharts = () => {
    myChart = echarts.init(chartBox.value);
    let option = {
        grid: {
            top: "0%",
            left: "0%",
            right: "0%",
            bottom: "0%",
            containLabel: true,
        },
        axisLine: {
            lineStyle: {
                color: "#ebf5ff",
            },
        },
        series: [
            {
                type: "gauge",
                startAngle: 90,
                endAngle: -270,
                pointer: {
                    show: false,
                },
                progress: {
                    show: true,
                    overlap: false,
                    roundCap: true,
                    clip: false,
                    itemStyle: {
                        color: {
                            type: "linear",
                            x: 0,
                            y: props.orient === "horizontal" ? 1 : 0,
                            x2: props.orient === "horizontal" ? 0 : 1,
                            y2: 0,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: "#3dbaed",
                                },
                                {
                                    offset: 0.5,
                                    color: "#82e0bb",
                                },
                                {
                                    offset: 1,
                                    color: "#3dbaed",
                                },
                            ],
                            global: false,
                        },
                    },
                },
                axisLine: {
                    lineStyle: {
                        width: nowSize(7),
                    },
                },
                splitLine: {
                    show: false,
                    distance: 0,
                    length: 10,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                    distance: 50,
                },
                data: [
                    {
                        value: props.rate,
                        // name: 'Perfect',
                        title: {
                            offsetCenter: ["0%", "-30%"],
                        },
                        detail: {
                            valueAnimation: true,
                            offsetCenter: ["0%", "0"],
                        },
                    },
                ],
                title: {
                    fontSize: nowSize(14),
                },
                detail: {
                    width: 50,
                    height: 14,
                    fontSize: nowSize(14),
                    fontWeight: "bold",
                    color: "#369eff",
                    formatter: function (value) {
                        console.log(value);
                        // return value;
                        return value.toString().indexOf(".") > -1
                            ? value + "%"
                            : value + ".0%";
                    },
                },
            },
        ],
    };
    if (props.option) {
        option = Object.assign(option, props.option);
    }
    myChart.off("click");
    // myChart.on("click", function (params) {
    //     that.$emit("clickEchartIns", params); // 所选参数
    // });
    myChart.setOption(option, true);
};

defineExpose({
    getChartData,
});
</script>

<style scoped lang="less"></style>
